<template>
  <div>
    <t-sticky>
      <t-navbar
        title="设置"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <div class="page">
      <t-cell-group bordered style="background: #fff">
        <t-cell title="基本信息" arrow hover @click="goToAbout" />
        <t-cell title="账号与安全" arrow hover @click="goToAccountSecurity" />
      </t-cell-group>
      <div class="ge"></div>
      <t-cell-group
        bordered
        style="background: #fff; position: relative; top: -5px"
      >
        <t-cell title="关于怪兽漫画" arrow hover @click="goToBasicInfo" />
      </t-cell-group>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
// 关于怪兽漫画
const goToBasicInfo = () => {
  router.push({
    name: "basicInfo",
  });
};

// 跳转账号与安全
const goToAccountSecurity = () => {
  router.push({
    name: "accountSecurity",
  });
};

// 返回上一页
const handleBack = () => {
  router.back();
};

// 基础信息
const goToAbout = () => {
  router.push({
    name: "userInfo",
  });
};
</script>

<style>
.page {
  background: #f5f5f5;
  width: 100vw;
  height: calc(100vh - 48px);
}
.ge {
  height: 0px;
  width: 100%;
  display: inline-block;
  background-color: #f5f5f5;
}
</style>
